<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">

    <div class="box-all">

      <div class="zhongjian">


        <div class="left">

          <el-descriptions title="主人信息">
            <el-descriptions-item label="就诊编号"> {{this.querypet.consultationId}}</el-descriptions-item>
            <el-descriptions-item label="账户余额"> {{this.querypet.customerBalance}}</el-descriptions-item>
            <el-descriptions-item label="主人姓名"> {{this.querypet.customerName}}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{this.querypet.customerPhone}}</el-descriptions-item>
            <el-descriptions-item label="联系地址">{{this.querypet.customerName}} </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="宠物信息">
            <el-descriptions-item label="宠物名称">{{this.querypet.petName}}</el-descriptions-item>
            <el-descriptions-item label="宠物性别">{{this.querypet.sex}}</el-descriptions-item>
            <el-descriptions-item label="宠物年龄">{{this.querypet.age}} 岁</el-descriptions-item>
            <el-descriptions-item label="宠物类型">{{this.querypet.petType}}</el-descriptions-item>
            <el-descriptions-item label="宠物毛色">{{this.querypet.coatColor}}</el-descriptions-item>
            <el-descriptions-item label="宠物体重">{{this.querypet.weight}} Kg</el-descriptions-item>
            <br>
            <el-descriptions-item label="症状描述">{{this.querypet.symptom}}</el-descriptions-item>
          </el-descriptions>
          <br>

          <!--          -->
          <h1>处方单</h1>
          <template>
            <el-table :data="tableDatacf" style="width: 100%" max-height="250">
              <el-table-column fixed prop="materielId" label="编码" ></el-table-column>
              <el-table-column fixed prop="materielName" label="项目名称" ></el-table-column>
              <el-table-column prop="specification" label="规格" ></el-table-column>
              <el-table-column prop="dosage" label="用量" ></el-table-column>
              <el-table-column prop="medicationInstruction" label="用法"></el-table-column>
              <el-table-column prop="number" label="数量" ></el-table-column>
              <el-table-column prop="unitPrice" label="单价"></el-table-column>
              <el-table-column prop="sumPrice" label="总金额"></el-table-column>
              <!--              <el-table-column prop="barCode" label="条码"></el-table-column>-->
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRowcf(scope.$index, tableDatacf)"
                    type="text"
                    size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>

          <br>
          <h1>检查单</h1>
          <template>
            <el-table :data="tableDatajc" style="width: 100%" max-height="250">
              <el-table-column fixed prop="inspectionId" label="编码" ></el-table-column>
              <el-table-column fixed prop="inspectionName" label="项目名称" ></el-table-column>
              <el-table-column prop="address" label="位置" ></el-table-column>
              <el-table-column prop="number" label="次数" ></el-table-column>
              <el-table-column prop="unitPrice" label="单价"></el-table-column>
              <el-table-column prop="sumPrice" label="总金额"></el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRowjc(scope.$index, tableDatajc)"
                    type="text"
                    size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>




        </div>



        <div class="right">

          <el-form :model="querypetlist" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">


              <el-form-item label="手机号码" prop="customerPhone">

                <el-input
                  v-model="querypetlist.customerPhone"
                  placeholder="请输入手机号码"
                  clearable
                  @keyup.enter.native="handleQuery"
                  style="width:80%;"
                />
              </el-form-item>


            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <h1>出库待结算</h1>
          <el-table v-loading="loading" :data="petCklist"  @cell-dblclick="handleCurrentChangepet">
            <el-table-column label="就诊号" align="center" prop="consultationNo" :formatter="formatConsultationNo" />
            <el-table-column label="手机号" align="center" prop="customerPhone" />
            <el-table-column label="主人姓名" align="center" prop="customerName" />

<!--            <el-table-column label="宠物名称" align="center" prop="petName" />
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              type="text"
                              icon="el-icon-edit"
                              @click="handleUpdate(scope.row)"
                              v-hasPermi="['hospital:ConsultationRecord:edit']"
                            >结算</el-button>
                          </template>
                        </el-table-column>-->
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="querypetlist.pageNum"
            :limit.sync="querypetlist.pageSize"
            @pagination="querypetlist"
          />



        </div>
      </div>


      <div class="bottom">
        <div id="app2">
          <el-row :gutter="10" class="mb8">
            <el-col :span="5">
              <el-button
                type="warning"
                round
                icon="el-icon-plus"
                @click="submitForm"
                v-hasPermi="['hospital:customer:add']"
              >结算出库</el-button>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>
    <!-- 添加处方药品 -->
    <el-dialog :title="titlejx" :visible.sync="openjx" width="500px" append-to-body>
      <el-form ref="formcf" :model="formjx" :rules="rulesjx" label-width="80px">


        <el-form-item label="总金额" prop="planNum" >
          <el-input v-model="formjx.allAmount" placeholder="总金额"  :disabled="true"/>
        </el-form-item>
        <el-form-item label="实收金额" prop="actualAmount">
          <el-input v-model="formjx.actualAmount" placeholder="请输入实收金额" />
        </el-form-item>

<!--        <el-form-item label="支付方式" prop="payType">
          <el-input v-model="formjx.payType" placeholder="请输入用量" />
        </el-form-item>-->
        <el-form-item label="是否使用余额" prop="customerBalance">
        <el-switch
          v-model="formjx.value"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormjx">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import {queryConsultationRecord, outbound, queryOutboundOrder } from "@/api/hospital/PetHospital";
import Brand from "@/views/hospital/Brand/index.vue";


export default {
  name: "Customer",
  components: { Brand },
  dicts: ['sys_user_sex', 'pet_sex', 'pet_type', 'consultation_status'],
  data() {
    return {
      value: true,
      showSearch: true,
      // 总条数
      total: 0,
      // 遮罩层
      loading: false,


      //就诊列表 查询参数
      querypetlist : {
        pageNum: 1,
        pageSize: 10,
        consultationStatus: '1',
        customerPhone: null,
        //默认只获取当天时间就诊但
        timeStart : null,
        timeEnd : null,

      },

      ConsultationRecordList: [],

      querypet: {
        pageNum: 1,
        pageSize: 10,
        consultationNo: null,
        customerId: null,
        customerPhone: null,
        customerName: null,
        customerBalance: null,

        consultationId: null,
        consultationCode: null,

        petId: null,
        petName: null,
        sex: null,
        age: null,
        petType: null,
        weight: null,
        coatColor: null,
        consultationStatus: null,
        consultationStatusName: null,
        consultationTime: null,
        symptom: null,
        prescription: null,

        //默认只获取当天时间就诊但
        startTime : null,
        endTime : null,
      },

      tableDatacf: [],
      tableDatajc: [],
      petCklist : [],

      outboundall : {
        consultationId : 1,
        list : [],
        inspectionList : [],
        customerBalance : true,
        payType : 1,
        remark : '老子是备注',
        actualAmount: '1',
      },

      openjx: false,
      titlejx: '',
      formjx: {
        value: false,
      },
      // 表单校验
      rulesjx: {},

    };
  },


  created() {
    //查询待出库记录
    this.getqueryOutboundOrder();

  },

  methods: {

    /** 查询宠物就诊记录列表 */
    getqueryOutboundOrder() {
      //只查询当天数据
      this.querypetlist.timeStart = this.getDatetoday() + "  00:00:00";
      this.querypetlist.timeEnd   = this.getDatetoday() + "  23:59:59";

     // this.querypetlist.customerPhone = '1',  // 测试给个 1    目前李辉这里接口必须传值  通过手机号获取待出库
      this.loading = true;
      queryOutboundOrder(this.querypetlist).then(response => {
        this.petCklist = response.data;
        this.loading = false;
      });
    },


    /** 搜索按钮操作 */
    handleQuery() {
       this.getqueryOutboundOrder();
    },

    getDatetoday(){
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1;
      var day = today.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      // console.log(year + "-" + month + "-" + day);

      return year + "-" + month + "-" + day
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      //this.handleQuery();
    },

    //双击选中医生    弹框确认挂号信息。
    handleCurrentChangepet(val) {

      console.log(val)
      //数据会写到 页面赋值
       this.querypet.customerName = val.customerName;
       this.querypet.consultationId = val.consultationId;
       this.querypet.customerPhone = val.customerPhone;
       this.querypet.customerBalance = val.customerBalance;

       this.querypet.petName = val.petName;
       this.querypet.sex = val.sex;
       this.querypet.age = val.age;
       this.querypet.petType = val.petType;
       this.querypet.coatColor = val.coatColor;
       this.querypet.weight = val.weight;
       this.querypet.symptom = val.symptom;

       this.tableDatacf = val.outBoundDetailVO.outboundRecordList;
       this.tableDatajc = val.outBoundDetailVO.inspectionRecordList;
    },

    // 就诊号 只展示后三位  前面是0 去掉
    formatConsultationNo(row, column, cellValue) {
      // 将单元格的值转为字符串
      const value = String(cellValue);
      // 使用正则表达式提取后三位数字
      const match = value.match(/(\d{3})$/);

      if (match) {
        // 如果匹配成功，返回提取的后三位数字
        let num = match[1];
        // 去掉前导0
        num = num.replace(/^0+/, '');
        return num;
      } else {
        // 如果匹配失败，返回空字符串
        return '';
      }
    },

    /** 出库结算 */
    submitForm() {

      console.log(this.tableDatacf)
      console.log(this.tableDatajc)
      var allAmount = 0;
      if ( this.tableDatacf != null){
        this.tableDatacf.forEach(function(row) {
          allAmount += row.sumPrice;
        });
      };

      if ( this.tableDatajc != null){
        this.tableDatajc.forEach(function(row) {
          allAmount += row.sumPrice;
        });
      };

     // alert(allAmount)

      this.formjx.allAmount =  allAmount;
      // 弹出对话框。  计算总金额，  输入框 ，输入实际金额， 加上 是否 是hi用 会员余额，
      //this.loading = true;
      this.openjx = true;
      this.titlejx = "出库结算";
    },

    submitFormjx() {

      //支付类型默认线下， 暂不统计。，
      this.outboundall.consultationId = this.querypet.consultationId;

      //
     /* if ( this.tableDatacf != null){
        this.tableDatacf.forEach(function(row) {
          this.outboundall.list.push({id :  row.id});
        });
      };*/

      if (this.tableDatacf != null) {
        this.tableDatacf.forEach(row => {
          this.outboundall.list.push({id: row.id});
        });
      }

      if ( this.tableDatajc != null){

        this.tableDatajc.forEach(row => {
          this.outboundall.inspectionList.push(row.id);
        });
     /*   this.tableDatajc.forEach(function(row) {

          this.outboundall.inspectionList.push(  row.id);
        });*/
      };
      /*this.outboundall.list.push({id : '1'});
      this.outboundall.inspectionList.push(1);*/

      this.outboundall.customerBalance = this.formjx.value;
      this.outboundall.actualAmount = this.formjx.actualAmount;
      this.outboundall.payType = '1';

      console.log(this.outboundall)
/*
      outboundall : {
        consultationId : 1,
          list : [],
          inspectionList : [],
          customerBalance : true,
          payType : 1,
          remark : '老子是备注',
          actualAmount: '1',
      },*/



      this.$refs["queryForm"].validate(valid => {
        if (valid) {


          outbound(this.outboundall).then(response => {
            this.$modal.msgSuccess("出库结算完成");
            //清空 queryparam 数据
            this.reset();
            this.openjx = false;
          });
        }
      });
     /* this.$refs["formjc"].validate(valid => {
        this.tableDatajc.push(JSON.parse(JSON.stringify(this.formjc)));
        this.openjc = false;
        // 暂存在这个data。 接诊。复诊的时候获取这个data 判断是否有数据。  有的话将数据传入后台，进行缓存
      });*/
    },

    // 取消按钮
    cancel() {
      this.openjx = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formjx = {};
      this.resetForm("form");
    },

  },

};
</script>
<style>

.box-all {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hospital {
  margin-left: 45%;
  height: 100px;
}
.zhongjian{
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}
.left{
  width: 60%;
  margin-right: 0%;
}

.right{
  width: 40%;
  margin-left: 0%;

}
.bottom{
  margin-left: 20%;

  height: 100px;
}

.name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.addr {
  font-size: 12px;
  color: #b4b4b4;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;



    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
